<template>
  <div>
    <el-main>
      <el-form
        ref="searchForm"
        size="small"
        :model="searchModel"
        :inline="true"
        @keyup.enter.native="search"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="租户">
              <el-input
                placeholder="请选择租户"
                v-model="searchModel.tenantName"
                readonly="readonly"
                @click.native="handleOpenTenant"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-refresh" size="small" @click="resetSearch"
            >重置
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
            >搜索
            </el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="table"
        :data="tableData.records"
        :border="true"
        style="width: 100%"
        size="small"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="tenantName"
          label="租户"
          sortable="custom"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="image"
          label="图片"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-image :src="scope.row.bannerImage" style="width:60px;height:60px">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="url"
          label="链接地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :formatter="statusFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sortIndex"
          label="排序"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="datetimeFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-delete" @click="handleDelete(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="tableData.total > 0"
          :total="tableData.total"
          :page.sync="tableData.current"
          :limit.sync="tableData.size"
          @pagination="search"
        />
      </div>
      <el-footer>
        <el-button type="primary"
                   icon="el-icon-delete"
                   size="small"
                   @click="handleDeletes"
        >删除
        </el-button
        >
      </el-footer>
      <SelectTenant
        :show="selectTenantVisible"
        :searchOnShow="true"
        :tenantId="searchModel.tenantId"
        @selectTenant="handleSelectTenant"
        @clearTenant="handleClearTenant"
        @closeTenant="handleCloseTenant"
      ></SelectTenant>
    </el-main>
  </div>
</template>

<script>
import { deleteBanner, deletesBanner, pageBanner } from "@/api/commerce/banner";
import {Status} from "@/utils/constant/status";
import {parseTime} from "@/utils/common";
import {ApiError} from "@/utils/errors";
import SelectTenant from "@/components/dialog/SelectTenant.vue";
import Pagination from "@/components/Pagination/index.vue";

export default {
  components: { SelectTenant,Pagination },
  data() {
    return {
      Status,
      selection:[],
      selectTenantVisible: false,
      searchModel:{
        tenantId:null,
        tenantName:null,
      },
      tableData: {
        records: [],
        total: 0,
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.search();
  },
  methods: {
    handleSelectionChange(selection){
      this.selection = selection;
    },
    handleSortChange(sort){
      if(sort.order=='ascending'){
        sort.order = 'asc';
      }else{
        sort.order = 'desc';
      }
      this.search(sort);
    },
    handleOpenTenant(){
      this.selectTenantVisible = true;
    },
    handleSelectTenant(row){
      this.searchModel.tenantId = row.data.id;
      this.searchModel.tenantName = row.data.name;
      this.selectTenantVisible = false;
    },
    handleClearTenant(){
      this.searchModel.tenantId = null;
      this.searchModel.tenantName = null;
      this.selectTenantVisible = false;
    },
    handleCloseTenant(){
      this.selectTenantVisible = false;
    },
    handleUpdate(row) {
      this.$router.push({path: "commerce-banner-update",query:{id:row.id}});
    },
    handleDelete(row) {
      this.$confirm(`是否删除轮播图?`, "提示", {
        type: "warning"
      })
        .then(() => {
          const params = {
            id: row.id
          };
          deleteBanner(params).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success("删除轮播图成功");
              this.search();
            }
          });
        })
        .catch(() => {});
    },
    handleDeletes() {
      this.$confirm(`是否删除选中的${this.selection.length}个轮播图?`, "提示", {
        type: "warning"
      })
        .then(() => {
          const params = {
            ids: this.selection
          };
          deletesBanner(params).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success(`成功删除${res.data.data.count}个轮播图`);
              this.search();
            }
          });
        })
        .catch(() => {});
    },
    search(sort) {
      const params = {
        tenantId: this.searchModel.tenantId,
        current: this.tableData.current,
        size: this.tableData.size
      };
      if(sort){
        params.prop = sort.prop;
        params.order = sort.order;
      }
      pageBanner(params).then(res => {
        if (res.status == 200) {
          if (!res.data.success) {
            return this.$message.error(ApiError.msg(res.data.message));
          }
          this.tableData.records = res.data.data.records;
          this.tableData.total = res.data.data.total;
          this.tableData.current = res.data.data.current;
          this.tableData.size = res.data.data.size;
          for(const data of this.tableData.records){
            data.bannerImage = '/cloud-backend/cos/'+JSON.parse(data.image)[0]['path'];
          }
        }
      });
    },
    resetSearch(){
      this.searchModel.tenantId = null;
      this.searchModel.tenantName = null;
    },
    statusFormatter(row) {
      return Status[row.status]["name"];
    },
    datetimeFormatter(row) {
      return parseTime(row["createTime"]);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/full-form";
@import "@/styles/common-table";
</style>
